<template>
  <div style="width: 100%; height: 100%">
    <div
      ref="time_ech"
      class="time-ech"
      style="width: 100%; height: 100%"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
export default {
  components: {},
  props: {},
  data() {
    return {
      chartInstance: null,
      option: {
        color: ["#21ffeb", "#36adff", "#FF5F87", "#FFC652"],
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left",
          },
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          icon: "circle",
          left: "0",
          bottom: "0%",
          textStyle: {
            color: "rgba(255,255,255,0.8)",
          },
        },
        grid: {
          left: "3%",
          right: "2%",
          bottom: "23%",
          top: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [],
            axisTick: {
              show: false,
              alignWidthLable: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              color: "rgba(255,255,255,0.5)",
              interval: 0,
              align: "right",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            minInterval: 1,
            splitLine: {
              lineStyle: {
                color: "#1a1f6d",
                width: 1,
              },
            },
            axisLabel: {
              show: true,
              color: "rgba(255,255,255,0.5)",
            },
          },
        ],

        series: [],
      },
      searchFormObj: {
        fieldList: [
          {
            label: "关键字",
            type: "input",
            field: "dictName",
          },
          {
            label: "发生时间",
            type: "select",
            field: "dictType",
            list: "statusBoxList",
          },
          {
            label: "级别",
            type: "select",
            field: "status",
            list: "statusBoxList",
          },
          {
            label: "分类",
            type: "select",
            field: "status",
            list: "statusBoxList",
          },
          {
            label: "类型",
            type: "select",
            field: "status",
            list: "statusBoxList",
          },
          {
            label: "处置状态",
            type: "select",
            field: "status",
            list: "statusBoxList",
          },
        ],
        searchData: {},
        btnHidden: true,
        listTypeInfo: {
          statusBoxList: [
            { label: "正常", value: "0" },
            { label: "停用", value: "1" },
          ],
        },
        //  是否有额外的参数
        isNeedResetExtraParam: false,
      },
    };
  },
  computed: {
    ...mapState(["theme"]),
  },
  methods: {
    initChart() {
      // 初始化对象
      this.chartInstance = echarts.init(this.$refs.time_ech, this.theme);
      this.chartInstance.setOption(this.option);
      window.addEventListener("resize", () => {
        this.chartInstance.resize();
      });
      let _self = this;
      this.chartInstance.on("click", function (params) {
        _self.$emit("handleClick", params);
      });
    },
    // 获取值渲染
    getData(params) {
      this.option.xAxis[0].data = params.xAxisData;
      this.option.legend.data = params.labels;
      let series = [];
      if (params.value.length > 0) {
        params.value.forEach((i, index) => {
          series.push({
            symbol: "circle",
            name: i.name,
            type: "line",
            smooth: true,
            showSymbol: false,
            areaStyle: {
              opacity: 0.2,
            },
            emphasis: {
              focus: "series",
            },
            data: i.value,
          });
        });
      }
      this.option.series = [];
      this.option.series = series;
      this.chartInstance.setOption(this.option, true, true);
    },
  },
  mounted() {
    this.initChart();
    // 添加随页面变化而变化
  },
  destroyed() {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
};
</script>

<style lang="scss" scoped>
.time-ech {
  width: 100%;
  height: 67%;
}
</style>
